<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" >
        <el-form
          ref="queryForm"
          :model="queryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="区域" prop="area">
            <dept-select v-model="queryParams.area"/>
          </el-form-item>
          <el-form-item label="时间范围" prop="dateRange">
            <el-date-picker
              v-model="queryParams.timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="人员姓名" prop="name">
            <user-drug-select v-model="queryParams.userId" placeholder="请选择吸毒人员"/>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="loadJc">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-amap ref="map" map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :center="center" :zoom="zoom"
                 view-mode="2D" @init="initMap" @click="clickMap" class="amap-demo">
          <el-amap-control-geolocation @complete="getLocation"/>
          <el-amap-control-scale/>
          <el-amap-control-tool-bar/>
          <el-amap-control-control-bar/>
          <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" @click="(e) => {handleMarkerClick(marker, e)}"></el-amap-marker>

          <el-amap-info-window :position="currentInfo.pos" v-if="currentInfo" :visible="currentInfo.visible" is-custom closeWhenClickMap>
            <el-card class="box-card">
              <el-descriptions title="详细信息" :column="1" border size="mini">
                <el-descriptions-item label="姓名" >{{currentInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="身份证">{{currentInfo.idno}}</el-descriptions-item>
                <el-descriptions-item label="检测时间">{{currentInfo.time}}</el-descriptions-item>
                <el-descriptions-item label="检测地点">{{currentInfo.address}}</el-descriptions-item>
                <el-descriptions-item label="视频信息">
                  <template v-if="options">
                    <video-player :options="options" />
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-amap-info-window>

        </el-amap>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {queryJc} from "@/api/event/jcjh";
import {listByIds} from "@/api/system/oss";
import {videoPlayer} from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  name: "testMap",
  components: {videoPlayer},
  data() {
    return {
      zoom: 12,
      center: [112.551315, 37.864679],
      mapObj: null,
      queryParams: {
        areaCode: undefined,
        timeRange: undefined,
        userId: undefined
      },
      markers: [],
      currentInfo: undefined,
      options: undefined
    }
  },
  mounted() {
    this.loadJc()
  },
  methods: {
    handleMarkerClick(marker, event) {
      this.currentInfo = {
        pos: [event.lnglat.lng, event.lnglat.lat],
        visible: true,
        name: marker.userInfoDetail.name,
        idno: marker.userInfoDetail.idno,
        address: marker.jcdd,
        time: marker.jcrq,
        imgs: [],
        videos: []
      }
      if (marker.sp) {
        listByIds(marker.sp).then(res=> {
          this.currentInfo.videos = res.data.map(d=>d.url)
          this.options = this.getVideoOption(this.currentInfo.videos)
        })
      }
    },
    getVideoOption(urls=[]) {
      const sources = urls.map(d=> {
        return {
          type: 'video/mp4',
          src: d
        }
      })
      return {
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources,
        hls: true,
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    },
    loadJc() {
      this.markers = []
      const query = {};
      if (this.queryParams.timeRange && this.queryParams.timeRange.length === 2) {
        query.start = this.queryParams.timeRange[0]
        query.end = this.queryParams.timeRange[1]
      }

      queryJc({
        ...this.queryParams, ...query
      }).then(res=> {
        this.markers = res.data.map(d=> {
          return {
            position: [d.lng, d.lat],
            id: d.jcjhId,
            ...d
          }
        })
      })
    },
    getLocation(e) {
      console.log(e)
    },
    getMap() {
      console.log(this.$refs.map.$$getInstance());
    },
    clickMap(e) {
      console.log('click map :', e);
    },
    initMap(e) {
      this.mapObj = e
      console.log(window.AMap)
    }
  }
}
</script>

<style scoped>
.amap-demo {
  height: 800px;
}

.amap-sug-result {
  z-index: 1000
}
</style>
